<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>个人信息</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	[v-cloak] {
		display: none;
	}
	.avatar-uploader-icon {
    font-size: 40px;
    color: #8c939d;
    width: 92px;
    height: 92px;
    line-height:92px;
    text-align: center;
  }
</style>
</head>
<body>
<div id="app" v-cloak>
	<header>
	</header>
	<div class="header-space"></div>
	<section class="section471" v-loading="isLoading">
		<div class="content">
			<div class="face">
				<!-- <img src="images/face.jpg" alt=""> -->
				<el-upload
					key="ava-key"
					:show-file-list="false"
					:before-upload="checkImg"
					:http-request="uploadImg"
					accept=".jpg,.jpeg,.png,.JPG,.JPEG"
					class="avatar-uploader"
					action=""
				>
				<div v-if="info.image" class="img" style="text-align: center;">
					<img :src="info.image" alt="图片出错" class="item-img" style="width:92px;height:92px;border-radius: 100px;">
				</div>
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			</div>
			<ul class="form">
				<li>
					<span class="tt">姓名：</span>
					<input
						class="input"
						type="text"
						placeholder="请输入姓名"
						v-model="info.name"
					>
				</li>
				<li>
					<span class="tt">昵称：</span>
					<input
						class="input"
						type="text"
						placeholder="请输入昵称"
						v-model="info.nickname"
					>
				</li>
				<li>
					<span class="tt">性别：</span>
					<select name="" id="" v-model="info.sex">
						<option disabled value="">请选择</option>
						<option value="0">女</option>
						<option value="1">男</option>
					</select>
				</li>
				<li>
					<span class="tt">出生日期：</span>
					<el-date-picker
						v-model="info.birthday"
						size="medium"
						style="width: 100%"
						type="date"
						placeholder="选择日期">
					</el-date-picker>
				</li>
				<li>
					<span class="tt">所在地区：</span>
					<el-cascader
						v-model="address"
						size="medium"
						style="width: 100%"
						:options="selectList.region"
						:props="{ expandTrigger: 'hover', label: 'region_name', value: 'id', children: 'children' }"
						@change="handleChange"></el-cascader>
				</li>
				<li>
					<span class="tt">职位：</span>
					<el-cascader
							v-model="position_id"
							size="medium"
							style="width: 100%"
							:options="selectList.position"
							:props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'children' }"
							@change="posHandleChange"></el-cascader>
				</li>
				<li>
					<span class="tt">工作状态：</span>
					<el-select v-model="info.status_id" placeholder="请选择学历" size="medium" style="width: 100%">
						<el-option
								v-for="item in selectList.status"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</li>
				<li><span class="tt">毕业院校：</span>
					<input type="text" placeholder="请输入毕业院校" class="input" v-model="info.school_name"><i class="tips">选填</i></li>
				<li><span class="tt">学历：</span>
					<el-select v-model="info.education_id" placeholder="请选择学历" size="medium" style="width: 100%">
						<el-option
								v-for="item in selectList.education"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
					<i class="tips">选填</i></li>
			</ul>
			<div class="operate">
				<a href="javascript:void(0)" class="btn" @click="submitHandle">保存</a>
			</div>
		</div>
	</section>
	<footer id="footer"></footer>
</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="js/request.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script src="js/lcommon.js"></script>
<script>
	$(function(){
		$("header").load("./lcommon/header.html");
		$("#footer").load("./lcommon/footer.html");
	})
	var vm = new Vue({
		el: '#app',
		data () {
			return {
				isLoading: false,
				address: '',
				position_id: '',
				info: {
					image: '',	// 头像
					name: '',	// 姓名
					nickname: '',	// 昵称
					sex: '',	//性别
					birthday: '',	//出生
					area_id: '',	//地区id
					position_id: '',	// 职位id
					status_id: '',	// 工作状态id	(这个的列表没地方拿)
					school_name: '',	// 毕业院校
					education_id: '',	//教育程度id
				},
				infoTitle: {
					name: '请输入名称',
					position_id: '请选择职位类别',
					status_id: '请选择工作状态'
				},
				selectList: {}
			}
		},
		mounted () {
			this.fetchPersonalInfo();
			this.getList1();
		},
		methods: {
			posHandleChange(e) {
				console.log('职位选择', e);
				this.info.position_id = e[e.length - 1];
			},
			handleChange(e) {
				console.log('地区选择', e);
				this.info.area_id = e[e.length - 1];
			},
			getList1() {
				var vm = this;
				var url = 'person/resume/prepare';
				request(url, 'GET', '', function(res){
					if (res.code === 1) {
						vm.selectList = res.data;
					}
				}, function(err) {
					console.log(err)
				})
			},

			fetchPersonalInfo() {
				var vm = this;
				var url = 'person/resume/base_info';
				vm.isLoading = true;
				request( url, 'GET', '',
					function (res) {
						console.log('查询信息', res);
						for (let i in vm.info) {
							console.log('赋值')
							vm.info[i] = res.data.person_info[i];
						}
						vm.isLoading = false;
					},
					function (err) {
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
						vm.$message({
						  type: 'warning',
						  message: msg
						})
						vm.isLoading = false;
					}
				)
			},
			submitHandle() {
				var loading = this.$loading({
					lock: true,
					text: '保存中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})

				for (let i in this.infoTitle) {
					if (!this.info[i] && this.info[i] !== 0) {
						this.$message({
							type: 'error',
							message: this.infoTitle[i]
						})
						loading.close();
						return false;
					}
				}

				this.sendData(loading);
			},
			sendData(loading) {
				var vm = this;
				// console.log(param);
				request( 'person/resume/person_info', 'PUT', JSON.stringify(vm.info), function (res) {
					// console.log(res);
					loading.close();
					vm.fetchPersonalInfo();
					vm.$message({
						message: res.message,
						type: 'success'
					});
				}, function (err) {
					var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
					vm.$message({
						type: 'warning',
						message: msg
					})
					loading.close();
				})
			},
			checkImg: function (file, fileList) {
				if (file.size > 10 * 1024 * 1024) {
					this.$message('上传图片大小应小于10MB');
					return false
				}
				return true
			},
			uploadImg: function (e) {
				uploadImg({
					file: e.file,
					success: successFn.bind(this),
					fail: failFn.bind(this)
				})

				function successFn(res) {
					console.log('uploadSuccess', res);
					this.info.image = qiniuUrl + '/' + res.key;
				}

				function failFn(err) {

				}
			}
		}
	})
</script>
</body>
</html>